<template>
  <div class="nav">
    <div class="logo" v-show="logo">
      <img width="40" height="40" src="../assets/logo.png">
    </div>
    <div class="title">
      <slot></slot>
    </div>

    <div @click="$router.go(-1)" :class="back?'back':'back backHide'">
      返回
    </div>

    <div
      :style="back?'':'width:100%'"
      :class="search?'searchBox':'searchBox inputHide'">
      <input @blur="ser" v-model="value" type="text">
    </div>
  </div>
</template>

<script>
    export default {
      name: "navHeader",
      data(){
        return{
          value:''
        }
      },

      props:{
        back:{
          type:Boolean,
          default:false
        },
        search:{
          type: Boolean,
          default: false
        },
        logo:{
          type:Boolean,
          default:false
        }
      },

      methods:{
        ser(){
          this.$emit('search',this.value)
        }
      },
    }
</script>

<style scoped>
  .nav{
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    border-bottom:1px solid #f8f8f8;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  input{
    border: none;
    background: none;
    width: 100%;
    height: 40px;
    outline: none;
    background: #f8f8f8;
    border-radius: 15px;
  }
  .searchBox{
    width: calc(100% - 50px);
    height: 40px;
    display: flex;
    align-items: center;
  }
  .back{
    font-family: 宋体;
    width: 40px;
    height: 40px;
    background: #29D876;
    text-align: center;
    line-height: 40px;
    margin-right:10px ;
  }
  .backHide{
    display: none !important;
  }
  .inputHide{
    display: none !important;
  }
  .title{
    font-size: 20px;
    width: 200px;
    font-family: 华文隶书;
    /*background: red;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translateX(-50%) translateY(-50%);
  }
  .logo{
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
</style>
